<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1 {
				height: 200px;
				background-color: #FF0000;
			}

			.d2 {
				height: 200px;
				background-color: greenyellow;
			}
			
			/* .s1 {
				color: #ADFF2F;
				font-size: 30px;
			} */
			.d1 span {
				color: #ADFF2F;
				font-size: 30px;
			}
			
			.d2>span {
				color: red;
				font-size: 40px;
			}
			
			.d3 {
				height: 200px;
				background-color: #FF0000;
			}
			
			.d3 span, .d3 div {
				background-color: aliceblue;
			}
			
			/* span, div {
				
			} */
			
			div>a:link {
				color: #FF0000;
				text-decoration: none;
			}
			
			div>a:visited {
				color: yellow;
				text-decoration: none;
			}
			/* 如果没有:visited，就会生效 */
			div>a {
				color: greenyellow;
				text-decoration: none;
			}
			div>a:active {
				color: aqua;
				text-decoration: none;
			}
			div>a:hover {
				color: #F0F8FF;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!-- 将d1中的span字设置为绿色，且大小为30px -->
		<div class="d1">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<div>
				<span>4</span>
			</div>
		</div>
		<!-- 将d2中的子元素span颜色设置为红色，且大小为40px -->
		<div class="d2">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<div>
				<span>4</span>
			</div>
		</div>
		<div class="d3">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<div>
				<span>4</span>
			</div>
		</div>
		<div>
			<a href="http:www.baidu.com">百度一下</a>
			<a href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_7b2017716d4e40d8909ab58c8363f675">京东</a>
		</div>
	</body>
</html>
